<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue事件修饰符</title>
    <script src="../commonjs/vue.js"></script>
    <style>
        *{
            margin-top: 10px;
        }
        .box{
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>欢迎来{{school.name}}上学</h2>
        <a href="http://www.atguigu.com" @click.prevent="showInfo">点我去学习</a><!--.prevent阻止默认事件冒泡-->
        <div class="box" @click="showInfo">
            <button @click.stop="showInfo">点我去学习</button><!--阻止事件向上冒泡 .stop-->
        </div>
        <!--事件只触发一次  .once-->
        <button @click.once="showInfo">点我去学习</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//关闭开发提示
        new Vue({
            el:'#app',
            data(){
                return{
                    school:{name:'武威职业学院'}
                }
            },
            methods:{
                showInfo(event){
                    // event.preventDefault()  //阻止默认事件冒泡
                    // event.stopPropagation()   //阻止事件向上冒泡
                    alert("同学你好！")
                }
            }
        })
    </script>
</body>
</html>